<template>
<div class="app-container">

    <el-form ref="QueryForm"  :model="queryForm" label-width="180px" size="medium">
        <el-input v-model="queryForm.userTopPermissionGridId" hidden/>
        <el-input v-model="queryForm.gridId" hidden/>
        <el-col :span="8">
            <el-form-item label="统计开始月份" >
            <el-date-picker v-model="queryForm.monthBegin" />
            </el-form-item>
        </el-col>
         <el-col :span="8">
            <el-form-item label="统计截止月份：" >
            <el-date-picker v-model="queryForm.monthEnd" />
            </el-form-item>
        </el-col>
         <el-col :span="8">
           <el-form-item class="align-text:center">
               <el-button type="primary" size="medium" round icon="el-icon-search" :loading="downloadLoading" style="margin:0 0 20px 20px;"  @click="handleSearch()">
                查询
            </el-button>
            <el-button type="info" size="medium" round icon="el-icon-back" :loading="downloadLoading" style="margin:0 0 20px 20px;"  @click="handleBack()">
                返回
            </el-button>
         </el-form-item>
        </el-col>
    </el-form>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
    :row-click="handleCell">
    <el-table-column
      prop="deptName"
      label="网格区域"
      width="250">
      <template slot-scope="{row}">
       <el-link @click="handleSearchTo(row)" target="_blank" class="buttonText"  type="primary" :underline="false">{{row.deptName}}</el-link>
      </template>
    </el-table-column>

      <el-table-column label="人口信息采集">
        <el-table-column
          prop="rkcj"
          
          label="人口采集"
          width="120">
        </el-table-column>
        <el-table-column
          prop="rkbz"
          label="地图标注"
          width="120">
        </el-table-column>
      </el-table-column>

      <el-table-column label="房屋信息采集">
        <el-table-column
          prop="fwcj"
          label="房屋采集"
          width="120">
        </el-table-column>
        <el-table-column
          prop="fwbz"
          label="地图标注"
          width="120">
        </el-table-column>
      </el-table-column>

      <el-table-column label="楼栋信息采集">
        <el-table-column
          prop="ldcj"
          label="楼栋采集"
          width="120">
        </el-table-column>
        <el-table-column
          prop="ldbz"
          label="地图标注"
          width="120">
        </el-table-column>
      </el-table-column>
    <el-table-column
        prop="zzjg"
        label="综治机构采集"
        width="150">
        </el-table-column>
      <el-table-column label="两新组织采集">
        <el-table-column
          prop="fgyzjjzz"
          label="非公有制经济组织"
          width="140">
        </el-table-column>
        <el-table-column
          prop="shzz"
          label="社会组织"
          width="120">
        </el-table-column>
      </el-table-column>

      <el-table-column label="矛盾排查上报">
        <el-table-column
          prop="mdsb"
          label="上报数"
          width="120">
        </el-table-column>
        <el-table-column
          prop="mdbj"
          label="办结数"
          width="120">
        </el-table-column>
      </el-table-column>

  </el-table>
</div>
</template>
 
<script>
 import {getDataList,getBackDataList} from "@/api/xapply/statistics/baseDataStatistics";
  export default {
    data() {
      return {
          gridId: "",//隐藏
          monthBegin: "",
          monthEnd: "",
          tableData: [],
          queryForm: {},
      }
    },
    methods: {
      tableRowClassName({rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSearch(){
        console.log(this.queryForm.monthBegin);
        let form = null;
        form = this.queryForm;
        const params = form;
        getDataList(params).then(res=>{
            console.log(res.data);
            this.tableData = res.data.baseDataStatisticsList;
            this.queryForm.userTopPermissionGridId = res.data.userTopPermissionGridId;
            this.queryForm.gridId =  res.data.deptId;
            this.queryForm.monthBegin = res.data.monthBegin;
            this.queryForm.monthEnd = res.data.monthEnd;
        })
    },
    handleBack(){
      
        if(this.queryForm.userTopPermissionGridId == this.queryForm.gridId){
            this.$message({
                    message: '已经是最顶层',
                    type: 'success'
            });
        }else{
          this.queryForm.gridId = "goback"+this.queryForm.gridId;
          let form = null;
          form = this.queryForm;
          const params = form;
          getBackDataList(params).then(res=>{
            this.tableData = res.data.baseDataStatisticsList;
            this.queryForm.userTopPermissionGridId = res.data.userTopPermissionGridId;
            this.queryForm.gridId =  res.data.deptId;
            this.queryForm.monthBegin = res.data.monthBegin;
            this.queryForm.monthEnd = res.data.monthEnd;
        })
        }
    },
    handleSearchTo(row){
      this.queryForm.gridId = row.deptId;
      let form = null;
      form = this.queryForm;
      const params = form;
        getDataList(params).then(res=>{
            console.log(res.data);
            this.tableData = res.data.baseDataStatisticsList;
            this.queryForm.userTopPermissionGridId = res.data.userTopPermissionGridId;
            this.queryForm.gridId =  res.data.deptId;
            this.queryForm.monthBegin = res.data.monthBegin;
            this.queryForm.monthEnd = res.data.monthEnd;
        })
    },
    },
    
  }
</script>
<style ang="scss" scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .avue-view{
     height:100%;
  }
 .app-container{
   background: #d8ecff; 
  padding:10px 5px 0; 
  border-top:1px solid #cee1f3;
  height: 100%
  }
  .el-table thead {
     background-color:#eaf1ff; /*#c3dde0*/
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #dfdfdf;
        text-align: center;
}
</style>